<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐</title>
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/normalize.css">
    <!-- 引入阿里图标 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1923978_2ru0mgq24s.css">
</head>
<!-- 1.歌曲搜索
  (1).按下回车(v-on.enter)
  (2).查询数据(axios 接口 v-model)
  (3).渲染数据(v-for 数组 than)
  
-->
<!-- 2.autocomplete="off"启用自动完成功能的 HTML 表单（其中一个输入字段禁用了自动完成） -->

<body>
    <div class="wrap">
        <!-- 播放器主体区域 -->
        <div id="player" class="play_wrap">
            <div class="swarch_bar ">
                <!-- 字体图标  (1.2)点击调用searchMusic方法进行搜索歌曲-->
                <span class="iconfont icon-sousuo1 span" @click="searchMusic"></span>
                <img src="./img/LsjN2BRPl6DfCJa.png" alt="">
                <!-- (1)搜索歌曲  @keyup.enter回车  v-model 双向绑定  回车调用searchMusic方法获取歌曲信息-->
                <input @keyup.enter="searchMusic" v-model="query" type="text" placeholder="输入要搜索的Music"
                    autocomplete="off">
            </div>
            <div class="center_con">
                <!-- 搜索歌曲列表 -->
                <div class="song_wrapper" ref='song_wrapper'>
                    <ul class="song_list">
                        <!-- (1.1)v-for 循环 item当前项 musicList 被遍历的对象 把歌曲的名字渲染到页面上-->
                        <li v-for="item in musicList">
                            <!-- (2)点击放歌 v-for="item in musicList"  点击调用playMusic方法把歌曲的id(item.id)传过去-->
                            <a href="javaScript:;" class="iconfont icon-bofang" @click="playMusic(item.id)">
                            </a>
                            <!-- 歌名 item.name-->
                            <b class="song_list_b" :title="item.name">{{item.name}}</b>
                            <span><i></i></span>
                            <b class="iconfont icon-mv" v-if="item.mvid!=0" @click="mv(item.mvid)"></b>
                        </li>

                    </ul>
                    <img src=" ./img/dor23bhZtIvK17X.png" alt="">
                </div>
                <!-- 歌曲信息容器 -->
                <div class="player_con">
                    <img src="./img/gZHko2WlpJNcGPv.png" alt="" :class="{play_bar:isActive}" class="player_con_img">
                    <!--黑胶碟片 -->
                    <img :class="{bofangdonghuan:isActive}" src="./img/hQPuH4gNRx7XayI.png" alt="">
                    <!-- (3).歌曲封面 -->
                    <img :class="{bofangdonghuan:isActive}" :src="muscCoVer" alt="">
                </div>
                <!-- 评论容器 -->
                <div class=" comment_wrapper" ref='comment_wrapper'>
                    <h5 class="title">热门留言</h5>
                    <div class="comment_list" v-for="item in hotComments">
                        <dl>
                            <dt>
                                <img :src="item.user.avatarUrl" alt="">
                            </dt>
                            <dd class="name">
                                {{item.user.nickname}}
                            </dd>
                            <dd class="detali">
                                {{item.content}}
                            </dd>
                        </dl>
                    </div>
                    <img src="./img/dor23bhZtIvK17X.png" alt="" class="xxx">
                </div>
            </div>
            <div class="audio_con">
                <!--音频 -->
                <!-- autoplay   视频/音频就绪自动播放就绪自动播放  controls向用户显示播放控件 
                    loop循环播放  音频标签<audio>  scr 播放地址 音频url地址-->
                <audio ref='audio' :src="musicUrl" controls autoplay loop class="myaudio" @play="play"
                    @pause="pause"></audio>
                <!-- (2).歌曲地址设置(v-bind 简写 :) musicUrl音频url地址 -->
            </div>
            <!-- 视频 -->
            <div class="video_con" v-show="showVideo">
                <video :src="mvid" controls autoplay loop ref='video'></video>
                <div ref='mask' class="mask iconfont icon-bofang1" @click="hide"></div>
            </div>
        </div>

    </div>
    <!-- 引入axios 在线链接 -->
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入自己的js文件 -->
    <script src="js/main.js"></script>
    <!-- 引入移动端的适配方案 -->
    <script src="./js/flexible.js"></script>
</body>

</html>